<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<link rel="stylesheet" href="../css/bootstrap-icons.css" />
		<script src="../js/bootstrap.bundle.js"></script> -->
	</head>
	 <style>
	/* 	.k1 {
			width: 20px;
		}

		.k2 {
			width: 30px;
		} */
/* 
		.k3 {
			width: 20px;
		}

		.k4 {
			width: 100px;
		}

		.k5 {
			width: 600px;
		}

		.k6 {
			width: 700px;
		} */

		button {
			background-color: #169BD5;
			color: #fff;
			box-shadow: 20px;
			border-radius: 7px;
			border-style: none;
			margin-top: 12px;
		}

		.buttons {
			background-color: #D9001B;
		}

		a {
			text-decoration: none;
			color: #333333;
		}

		.p2 {
			width: 1325px;
			height: 50px;
			background-color: #f2f2f2;

		}

		.a2 {
			width: 200px;
			background-color: #F2F2F2;
		}

		.a2 .container {
			height: 930px;
			margin-top: 0;
		}
		.p1 {
			background-color: #f2f2f2;

		}

		.p2 {
			width: 1330px;
			height: 50px;
			background-color: #f2f2f2;
      }
      
		.bf {
			width: 1330px;
			height: 150px;
		}
		 .z .dd1 table tr td {
			 height: 23px;
		 }
     .z .bf table td div{
     	float: right;
     }
		.z .bf table td div input {
			border-radius: 4px;
			margin-top: 18px;
			font-size: 10px;
			width: 235px;
			height: 22px;
		 border: 1px solid #666;
		}

		.z {
			font-size: 3px;
			width: 1269px;
		}
		.z .bf table tr td button{
			margin-right: 60px;
		}
		.z  .dd1  table tr:nth-child(2n-1){
			background-color: #F2F2F2;
			
		}
		.z  .dd1  table {
			border: 1px solid #D7D7D7;
		}
		
		
		
		.mask{
			background-color: rgba(0, 0, 0, .5);
			/* 撑满全屏:使用固定定位定位且四个方向值都为08 */
			position: fixed;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			display: none;
		}
		/* 登录框 */
		.mask .login{
			width: 600px;
			height: 520px;
			background-color: #fff;
			padding: 20px;
			/* 当一个明确宽高的子元素使用绝对定位四个方向的值为0,可以结合margin:auto;
			实现在父元素中的水平居中 */
			/* 脱离文档流 */
			position: absolute;
			/* 四个方向全为0,然后居中 */
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		/* 为登录框的input做统一样式设置 */
		.mask .login input{
			width: 100%;
			height: 30px;
			padding: 0 10px;
			margin-top: 20px;
			/* 变成盒子模型 */
			box-sizing: border-box;
		}
		
		
		a {
		    text-decoration: none;
		    color: #08a3f1;
		}
		
		td {
		    line-height: 35px;
		}
		
		input {
		    border: none;
		    outline: none;
		    text-align: center;
		}
		
		.inner {
		    display: none;
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    background-color: rgba(0, 0, 0, 0.3);
		}
		
		.box {
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    width: 900px;
		    height: 500px;
		    margin: auto;
		    background-color: white;
		    padding: 10px;
		    box-sizing: border-box;
		}
		
		.box table,
		table input {
		    width: 100%;
		    background-color: wheat;
		}
		
		.btns {
		    display: flex;
		    width: 80%;
		    padding: 20px;
		    justify-content: center;
		    margin: 0 auto;
		}
		
		.btns button {
		    width: 100px;
		    height: 35px;
		    margin: 20px;
		}
		.btnn{
		    width: 100%;
		    text-align: center;
		}
		#add{
		    margin:20px;
		    width: 100px;
		    height: 35px;
		}
	</style>
	<body>
		<div class="z">
			<div class="bf">
				<table>
					<tr>
						<td>
							<div>项目编码:<input type="text" /></div>
						</td>
						<td>
							<div>合同名称:<input type="text" /></div>
						</td>
						<td>
							<div>合同金额:<input type="text" /></div>
						</td>
						<td>
							<div>合同类型:<input type="text" /></div>
						</td>

					</tr>
					<tr>
						<td>
							<div>签订日期:<input type="text" /></div>
						</td>
						<td>
							<div>项目编码:<input type="text" /></div>
						</td>
						<td>
							<div>项目名称:<input type="text" /></div>
						</td>
						<td>
							<div>创建人:<input type="text" /></div>
						</td>

					</tr>
					<tr>
						<td>
							<div>创建起止日期:<input type="text" /></div>
						</td>
						<td>
							<div>状态:<input type="text" /></div>
						</td>
						<td><div>状态:<input type="text" /></div></td>
						<td><div><button>查询</button>      <button>重置</button></div></td>

					</tr>
				</table>
			</div>
			<div class="p2">
				<button  onclick="add()">新建</button>
				<button>修改</button>
				<button class="buttons">删除</button>
				<button>导入</button>
				<button>导出</button>
			</div>


			<table onload="getList()" id="table" border="1"
			        style="width:100%;text-align: center;border-collapse: collapse;margin-top: 10px;">
			    </table>
			   <!-- <div class="btnn">
			        <button id="add" onclick="add()"></button>
			    </div> -->
			    
			    <div class="inner">
			        <div class="box">
			            <table border="1" style="text-align: center;border-collapse: collapse;margin-top: 10px;">
			                <tr>
			                    <td><input id="inp2" type="text" placeholder="项目名称" value=""></td>
			                    <td><input id="inp3" type="text" placeholder="项目阶段" value=""></td>
			                    <td><input id="inp4" type="date" placeholder="开工时间" value=""></td>
			                    <td><input id="inp5" type="text" placeholder="项目金额" value=""></td>
			                    <td><input id="inp6" type="text" placeholder="项目编号" value=""></td>
			                </tr>
			            </table>
			            <div class="btns">
			                <button onclick="btn1()">添加</button>
			                <button onclick="clos()">关闭</button>
			            </div>
			
			        </div>
			    </div>
			</body>
			<script>
			    function getList() {
			        let xhr = new XMLHttpRequest();
			        xhr.open('GET', 'http://localhost:3000/emp/searchs', true);
			        xhr.send();
			        xhr.onload = function () {
			            let str = JSON.parse(xhr.responseText);
			            let tr_td = `<tr>
			                       <td>序号</td>
			                       <td>项目名称</td>
			                       <td>项目阶段</td>
			                       <td>开工时间</td>
			                       <td>项目金额</td>
			                       <td>项目编号</td>
			                        <td>操作</td>     
			                     </tr>`;
			            for (var i = 0; i < str.data.length; i++) {
			                let { eid, ename, sex, birthday, salary, deptid } = str.data[i];
			                if (sex == 0) {
			                    sex = '前期';
			                } else if (sex == 1) {
			                    sex = '后期';
			                }
			                let time = new Date(birthday);
			                birthday = time.getFullYear() + '-' + ("0" + (time.getMonth() + 1)).slice(-2) + '-' + ("0" + time.getDate()).slice(-2)
			                tr_td += `<tr>
			                        <td>${i+1}</td>
			                        <td>${ename}</td>
			                        <td>${sex}</td>
			                        <td>${birthday}</td>
			                        <td>${salary}</td>
			                        <td>${deptid}</td>
			                        <td>
			                            <a href="javascript:upd(${i+1},'${eid}','${ename}','${sex}','${birthday}','${salary}','${deptid}')">编辑</a> <a>查看</a> <a>删除</a> <a>送审</a>
			                        </td>
			                    </tr> `
			            }
			            table.innerHTML = tr_td
			        }
			    }
			    getList()
			</script>
			<script>
			    let inner = document.querySelector('.inner')
			    function btn1() {
			        let xhr = new XMLHttpRequest();
			        xhr.open('POST', `http://localhost:3000/emp/add`, true);
			        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			        let sex = inp3.value;
			        if (sex == '前期') {
			            sex = 1
			        } else if (sex == '后期') {
			            sex = 0
			        }
			        xhr.send(`ename=${inp2.value}&sex=${sex}&birthday=${inp4.value}&salary=${inp5.value}&deptid=${inp6.value}`);
			        xhr.onload = function () {
			            let str = JSON.parse(xhr.responseText);
			            console.log(str);
			            if (str.code === 200) {
			                alert('添加成功');
			                inner.style = 'display: none';
			                getList()
			            } else {
			                alert('添加失败');
			                getList()
			            }
			        }
			    }
			
			    function add() {
			        inner.style = 'display: block';
			    }
			    function clos() {
			        inner.style = 'display: none';
			    }
			</script>
			
			
			<div style="float: right;">
				<button style="width: 40px;height: 20px;"><</button>
				<button>1</button>
				<button>2</button>
				<button>3</button>
				<button>4</button>
				<button>5</button>
				<button>...</button>
				<button style="width: 40px;height: 20px;">></button>
				<button style="width: 60px;height: 20px;">15条/页 ∨</button>
				<span>跳至</span>
				<button style="width: 60px;height: 20px;">......</button>
			</div>
		</div>
		<script>
		new1.onclick=function(){
			mask.style.display='block'
		qn2.onclick=function(){
			mask.style.display='none'
		}
		}
		 </script>
			<div class="mask" id="mask">
				<div class="login">
					<iframe src="__hetongxinxidengji.html" width="100%" height="455px" frameborder="0"></iframe>
				
				<div id="qn2">
					<button   style="width: 100px; height: 20px;line-height: 20px;">取消</button>
					<button style="width: 100px; height: 20px;line-height: 20px;" >保存</button>
					<button style="width: 100px; height: 20px;line-height: 20px;">送审</button>
				</div>
				</div>
			</div>
	</body>
</html>